<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort()
            + path + "/";
%>
<head>
    <base href="/">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=no, shrink-to-fit=no">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <meta name="apple-mobile-web-app-capable" content="no"/>
    <meta name="format-detection" content="telephone=no">
    <title></title>
    <script src="static/js/cssrem.js"></script>
    <link href="static/css/style.css" rel="stylesheet">


</head>
<!-- ${goodsDetail.title} -->
<body class="body-detail">
<input type="hidden" id="refreshed" value="no">
<script type="text/javascript">
    var e = document.getElementById("refreshed");
    if (e.value == "no") e.value = "yes";
    else {
        e.value = "no";
        location.reload();
    }
</script>
<header class="header">
    <div class="header-bg"></div>
    <div class="titlet-bar white">
        <a class="btn-goback dib" click="onGoBack"></a>
        <div class="title ell"></div>
    </div>
</header>
<div class="content content-detail ovh">
    <div class="goods-main mod-goods">
        <div class="wrapper">
            <div class="maxw goods-banner f0">
                <img class="abs" src="${img}" width="100%" alt="">

                <div class="rel z2">
                    <dl class="white p20 ml20 mr20 mt10">
                        <dt class="laber-period f22 tc">第${goodsDetail.time }期</dt>
                        <dd class="goods-title f32"><span class="js-goods-title">${goodsDetail.title}</span></dd>
                        <dd class="f0 mt20">
                            <i class="dib vm icon-map mr20"></i>
                            <span class="dib vm f26 ">${goodsDetail.baseName }</span>
                        </dd>
                    </dl>
                    <div class="p20 mt20"></div>
                    <div class="progress-bar p20">
                        <div class="bar f0">
                            <span class="dib"
                                  style="width:${goodsDetail.saleNum*100/(goodsDetail.stockNum +goodsDetail.saleNum)}%"></span>
                        </div>
                        <div class="cell white pt20">
                            <div class="cell-bd f0">
                                <span class="f26">已认养</span>
                                <em class="f26 gf9953c">${goodsDetail.saleNum }</em>
                                <span class="f26">${goodsDetail.unitDesc }</span>
                            </div>
                            <div class="cell-fd pr0 f0">
                                <span class="f26">剩余</span>
                                <em class="f26 gf9953c">${goodsDetail.stockNum }</em>
                                <span class="f26">${goodsDetail.unitDesc }可认养</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- 价格 -->
            <div class="mod-price cell">
                <div class="cell-hd tc">
                    <div class="f0">
                        <i class="dib vm icon-reward--01 mr10"></i>
                        <span class="dib vm f26 g9">预计产量(${goodsDetail.unitDesc })</span>
                    </div>
                    <p class="f38 gf9953c">
                        <em class="js-weight-average">${goodsDetail.expectHarvest }</em>${goodsDetail.harvestUnitDesc }
                    </p>
                </div>
                <div class="cell-bd tc">
                    <div class="dib tl">
                        <p class="f0">
                            <span class="f28 g9">认养周期：</span>
                            <span class="f30">${goodsDetail.equityCycle }个月</span>
                        </p>
                        <p class="f0">
                            <span class="f28 g9">认养单价：</span>
                            <span class="f30">¥
                  <em class="js-price">${goodsDetail.price }</em>
                </span>
                        </p>
                    </div>
                </div>
            </div>

            <div class="bgwh ge3 ui-1px-t ui-1px-b pt20 pb20 rurchase-quantity">
                <div class="f0 g6 pt10 pb10 tc">
                    <i class="dib vm icon-reward--02"></i>
                    <div class="dib vm pl20">
                        <span class="f28">认养</span>
                        <em class="f28 gf9953c js-number">${goodsDetail.minShopNum }</em>
                        <span class="f28">${goodsDetail.unitDesc }，预计收益约</span>
                        <span class="f28 gf9953c">
                <em class="js-weight">${goodsDetail.minShopNum * goodsDetail.expectHarvest }</em>${goodsDetail.harvestUnitDesc }</span>
                    </div>
                </div>
                <div class="m20 cell quantity">
                    <div class="cell-bd f0">
                        <span class="f30 g6">认养数量：</span>
                        <span class="f26 text-warning tips-number dn">*单笔最多购买${goodsDetail.maxShopNum }${goodsDetail.unitDesc }</span>
                    </div>
                    <div class="cell-fd p0">
                        <div class="mod-number g3">
                            <span class="btn-number number-decrease ion-ios-minus-empty f40"></span>
                            <input class="number-input tc number-form" type="tel" min="${goodsDetail.minShopNum }"
                                   max="${goodsDetail.maxShopNum }" value="${goodsDetail.minShopNum }">
                            <span class="btn-number number-increase ion-ios-plus-empty f40"></span>
                        </div>
                    </div>
                </div>
            </div>

            <dl class="mt20 p20 bgwh ui-1px-t ui-1px-b ge3 income-rules">
                <dt class="f28 g9 mb10">产品收益详情：</dt>
                <dd class="cell pt20 mt20">
                    <div class="cell-bd tc">
                        <i class="icon-01 dib"></i>
                        <p class="f24 g6">今日认养</p>
                        <p class="f22 g30bf6c">${goodsDetail.todayDate }</p>
                    </div>
                    <div class="cell-bd tc">
                        <p class="f24 g3">生长期</p>
                        <div class="transition-period"></div>
                    </div>
                    <div class="cell-bd tc">
                        <i class="icon-02 dib"></i>
                        <p class="f24 g6">开始收益</p>
                        <p class="f22 g30bf6c">${gsth.expectHarvestTime }</p>
                    </div>
                    <div class="cell-bd tc">
                        <p class="f24 g3">收益期</p>
                        <div class="transition-period"></div>
                    </div>
                    <div class="cell-bd tc">
                        <i class="icon-03 dib"></i>
                        <p class="f24 g6">收益到期</p>
                        <p class="f22 g30bf6c">${goodsDetail.endUseTime }</p>
                    </div>
                </dd>
                <dd class="g6 f24 tc m10 pt20">(请在认养后按提示填写收货地址)</dd>
            </dl>

            <div class="mt20 bgwh ui-1px-t ui-1px-b ge3 p20">
                <div class="f0 pt10 pb10">
                    <span class="g6 f30">本期截止日期：</span>
                    <span class="g3 f30">${goodsDetail.endTime }</span>
                </div>
            </div>
            <div class="mt20 bgwh ui-1px-t ui-1px-b ge3 pt20 pb20 pr20">
                <div class="cell pt20 pb20">
                    <div class="cell-hd g6 f28" style="align-self: flex-start;">认养须知：</div>
                    <div class="cell-bd f26 g3 pl20 pr20">预计产量为保底产量，请结合实际需求进行认养;
                        新疆、西藏、青海、港澳台及海外地区暂不支持配送。
                        <!-- <em style="color: #3ca2f9;"></em> -->
                    </div>
                </div>
            </div>
            <!-- tips -->
            <div class="tips-more js-tips tc">
                <span class="js-icon dib vm ion-chevron-down ion-chevron-up g9"></span>
                <span class="tips-more__text g0 f24 dib vm">上拉查看图文详情</span>
            </div>

        </div>
    </div>
    <div class="detail-main mod-detail bgwh ui-1px-t ge3">
        <div class="wrapper photo100 g3">
            ${goodsDetail.content }
        </div>
    </div>
</div>
<div class="column-buy">
    <div class="cell">
        <div class="cell-hd"></div>
        <div class="cell-bd tl lh0">
            <span class="money pr20"><em class="dib vm f26 g6">结算：</em><span class="dib vm f28">¥</span><em
                    class="dib vm js-money b f34"></em></span>
        </div>
        <div class="cell-fd">
            <a class="btn-buy f34  white js-buy" href="javascript:void(0)">立即认养</a>
        </div>
    </div>
</div>
<!-- 库存为0则说明 此商品不能再购买 -->
<input type="hidden" id="stockNum" value="${goodsDetail.stockNum }">
<!-- 售馨状态 00 售馨 01 售卖中 （状态等于00的时候 商品不能再购买）-->
<input type="hidden" id="saleType" value="${goodsDetail.saleType }">
<!-- 状态(00下架01上架) -->
<input type="hidden" id="state" value="${goodsDetail.state }">

<link href="https://cdn.bootcss.com/ionicons/2.0.1/css/ionicons.min.css" rel="stylesheet">
<script src="https://cdn.bootcss.com/axios/0.16.2/axios.min.js"></script>
<script src="static/js/layer_mobile/layer.js"></script>
<script type="text/javascript" src="static/js/app.js"></script>
<script type="text/javascript" src="static/js/details.js"></script>
<script>
    var btn = document.querySelector('.js-buy')
    var money = document.querySelector('.js-money')
    var number = document.querySelector('.number-form')
    var url = "<%=basePath%>wap/pay/firmOrder?goodsSpecTimeId=${goodsDetail.id}&goodsTimeId=${goodsTimeId}";
    btn.addEventListener('click', function (e) {

        var stockNum = document.querySelector('#stockNum')
        var saleType = document.querySelector('#saleType')
        var state = document.querySelector('#state')
        console.log(stockNum, stockNum.value.trim())

        if (stockNum && stockNum.value.trim() === '0') {
            layerShow('<div><p>非常抱歉，</p><p>您查看的商品已售罄~</p></div>', function () {
                btn.classList.add('disabled')
                setTimeout(function () {
                    layer.closeAll()
                }, 2000)
            })
        } else if (saleType && saleType.value.trim() === '00') {
            layerShow('<div><p>非常抱歉，</p><p>您查看的商品已售罄~</p></div>', function () {
                btn.classList.add('disabled')
                setTimeout(function () {
                    layer.closeAll()
                }, 2000)
            })
        } else if (state && state.value.trim() === '00') {
            layerShow('<div><p>非常抱歉，</p><p>您查看的商品已下架~</p></div>', function () {
                btn.classList.add('disabled')
                setTimeout(function () {
                    layer.closeAll()
                }, 2000)
            })
        } else {
            e.preventDefault()
            if (this.classList.contains('disabled')) {
                return;
            }

            location.href = url + '&num=' + number.value;
        }
    })


    function layerShow(html, callback) {
        layer.open({
            shade: false,
            className: 'layer-tips',
            title: ['', 'display:none'],
            content: html,
            success: function (index) {
                (callback && typeof (callback) === "function") && callback(index);
            }
        });
    }

    /* window.addEventListener('DOMContentLoaded', function () {
      var stockNum = document.querySelector('#stockNum')
      var saleType = document.querySelector('#saleType')
      console.log(stockNum,stockNum.value.trim())
      if (stockNum && stockNum.value.trim() === '0') {
        layerShow('<div><p>非常抱歉，</p><p>您查看的商品已售罄~</p></div>', function () {
          btn.classList.add('disabled')
          setTimeout(function () {
            layer.closeAll()
          }, 2000)
        })
      } else if (saleType && saleType.value.trim() === '00') {
        layerShow('<div><p>非常抱歉，</p><p>您查看的商品已售罄~</p></div>', function () {
          btn.classList.add('disabled')
          setTimeout(function () {
            layer.closeAll()
          }, 2000)
        })
      }
    }) */
</script>
</body>

</html>